<template>
  <div class="safePass">
    <van-popup
      :show="show"
      :close-on-click-overlay="false"
      :style="{ width: '80%', minHeight: '30%', top: '40%' }"
      :safe-area-inset-bottom="true"
      round
    >
      <div class="popupBox">
        <p class="title">支付密码</p>
        <p class="tips">请输入支付密码</p>
        <van-password-input
          :value="value"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
          :length="6"
        />
        <div class="btnCon">
          <button class="closeBtn"  v-wait-click="onCancel">取消</button>
          <button class="sureBtn" v-wait-click="onSure">确定</button>
        </div>
      </div>
    </van-popup>
    <!-- 数字键盘 -->
    <van-number-keyboard
      v-model="value"
      :show="showKeyboard"
      @blur="showKeyboard = false"
    />
  </div>
</template>

<script>
import { defineComponent, ref, watch } from "vue";

export default defineComponent({
  emits: ["onCancel","onSure"],
  props: {
    show:{
      type:Boolean,
      default:false
    },
  },
  setup(props,content) {
    console.log(props,content)

    const value = ref("");
    const showKeyboard = ref(false);

    watch(value,(val) => {
      if(val.length > 6) {
        value.value = val.slice(0,6)
      }
    },{deep:true})

    const onCancel = () => {
      value.value = "";
      content.emit("onCancel")
    }
    const onSure = () => {
      content.emit("onSure",value.value)
    }

    return {
      value,
      showKeyboard,
      onCancel,
      onSure,
    };
  },
});
</script>

<style scoped lang="less">

.popupBox {
  width: 100%;
  background-color: #fff !important;

  .title {
    color: #333;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding-top: 14px;
  }
  .tips {
    color: #333;
    font-size: 14px;
    text-align: center;
    padding-top: 14px;
    margin-bottom: 20px;
  }
  :deep(.van-password-input__security li) {
    border: 1px solid #eeeeee;
  }

  .btnCon {
    padding: 0 14px 14px;
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    .closeBtn {
      width: 45%;
      height: 45px;
      border: 1px solid #0d418b;
      background-color: #fff;
      color: #0d418b;
      font-size: 16px;
      border-radius: 8px;
    }
    .sureBtn {
       width: 48%;
      height: 45px;
      border: none;
      background-color: #0d418b;
      color: #fff;
      font-size: 16px;
      border-radius: 8px;
    }
  }
}
:deep(.van-number-keyboard) {
  z-index: 3000 !important;
}
</style>